@import '../style/var';

.em-currency {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  &__symbol {
    padding-right: 2px;
  }
  &__value {
    font-weight: normal;
  }
  &__precision {
    &::before {
      content: '.';
    }
  }
  &__text,
  &__after-text {
    margin-left: 2px;
  }
  &__before-text {
    margin-right: 2px;
  }

  &__precision,
  &__text,
  &__after-text,
  &__before-text,
  &__symbol {
    font-size: 80%;
  }

  @each $size, $font-size in $base-font-sizes {
    &--#{$size} {
      font-size: $font-size;
    }
    &--#{$size} &__value {
      font-size: $font-size * 1.25;
    }
  }

  &--uniform &__symbol {
    transform: scale(0.9);
    transform-origin: center bottom;
    &::before {
      line-height: 1;
    }
  }

  &--uniform &__value {
    font-size: $--font-size-sm;
  }

  @each $color, $value in $theme-colors {
    &--#{$color} {
      //   color: mix($--gray-8, $value, 10%);
      color: darken($value, 15%);
    }
  }
}
